Typography · Specimen · № 02
The Type Spec
Final · Garamond + Commissioner
EB Garamond 500 for moments · Commissioner for everything else Draft · iteration 05

Garamond is rare on purpose. It shows up for the H1, for italic highlights in a sentence, and for a pull quote — the three places where a document speaks. Every other piece of text is set in Commissioner, a humanist sans with old-style DNA that carries the page without trying to be the page.

GaramondH1 · highlights · pull quotes · drop caps · Commissionereverything else, including numerals · JetBrains Monocode only
I. Where each typeface lives The rules
Garamond is punctuation, not paragraphs.
The one-sentence rule

An old-style serif is a gesture. Used small and often, it flattens and fights the eye. Used large and seldom, it does exactly what it's meant to: mark the moments that matter. So Garamond gets three jobs, and only three: the H1 that opens a piece, the italic word that slows the reader inside a sentence, and the pull quote that asks them to stop.

Everything else — H2s, H3s, bylines, captions, numerals, labels, buttons, tables, navigation, deck copy — is set in Commissioner. A humanist sans with old-style proportions, so it rhymes with Garamond without repeating it. Two voices. One register each.

Display · H1The piece opens here. Italic for lyrical; roman for declarative.Garamond
H2 · SectionSection heads. Weight carries hierarchy, not family.Commissioner 600
H3 · SubheadSentence case, not caps. Medium weight, tight tracking.Commissioner 500
Eyebrow / Kicker10–11px, tracked caps. Before a headline.Commissioner 600
Body paragraphAlways. 15–16px, 1.6 line height, 62ch measure.Commissioner 400
Body highlightAn italic word inside a paragraph. Keep rare.Garamond italic
Pull quoteItalic, set off with an accent rule. No quote punctuation in body.Garamond italic
Drop capFirst letter of a piece's first paragraph. One per piece max.Garamond 500
Caption / Footnote12–13px, lower contrast color. Beneath figures.Commissioner 400
Byline · Date · MetaCaps, tracked, tabular numerals where relevant.Commissioner 500
UI labels · Buttons13px, weight 500. No tracking.Commissioner 500
Display numeralsBig stats on a page. Sans, tabular, slight negative tracking.Commissioner 500
Tabular numeralsTables and data. tabular-nums, weight 500.Commissioner 500
Code / inlineTechnical terms embedded in prose. Background shade for contrast.JetBrains Mono
Navigation12px, light tracking. Active state gets an accent rule.Commissioner 500
II. The hierarchy, piece by piece Specimens
Final Spec

EB Garamond + Commissioner

Serif for moments. Sans for work. A single accent — cobalt blue — used sparingly.
Display · H1
Opens a piece. Italic for lyrical; roman for declarative.
Garamond
A small stack for UI code that can be proven, not just shipped.
family: EB Garamond
weight: 500
size: 60px
line: 0.95
track: −0.024em
em: italic · accent
H2 · Section
Chapter heads. Weight creates the step, not family.
Commissioner
Measurement without reflow
family: Commissioner
weight: 600
size: 30px
line: 1.1
track: −0.018em
H3 · Subhead
Inside a section. Sentence case only — no caps.
Commissioner
Three primitives, one render loop, zero surprises.
family: Commissioner
weight: 500
size: 18px
line: 1.3
Eyebrow · Kicker
Small label above a headline. Tracked caps.
Commissioner
§ 01 · The Stack
family: Commissioner
weight: 600
size: 10.5px
track: 0.22em
case: uppercase
Body paragraph
The workhorse. Italic words render in Garamond.
Commissioner

pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source, so callers of measureCaption know by construction the result fits its width.

family: Commissioner
weight: 400
size: 15px
line: 1.6
measure: 62ch
em: Garamond 500it · 16.5px
Pull quote
Italic, set off with an accent rule.
Garamond
Layout facts should be provable from source — not discovered at paint time.
family: EB Garamond
style: italic 400
size: 30px
line: 1.25
rule: 2px accent · 20px pad
Caption · Footnote
Beneath figures. Low-contrast color.
Commissioner
Figure 1. A render pass from source tree to pixels, without a round trip through the DOM.
family: Commissioner
weight: 400
size: 12.5px
line: 1.5
color: ink-3
Byline · Date · Meta
Under a headline. Caps, tracked, tabular numerals.
Commissioner
Jordan Park · 04 · 17 · 26 · Notes on systems · 8 min read
family: Commissioner
weight: 500/600
size: 11px
track: 0.1em · caps
feat: tnum
UI bits
Buttons, inputs, nav. Sans, medium weight.
Commissioner
family: Commissioner
weight: 500
size: 13px
btn: 8/14 · border 1
nav: accent rule on active
Display numerals
Hero stats. Sans · tabular · slight negative tracking.
Commissioner
3primitives
1,248proofs passing
0.42msp50 render
family: Commissioner
weight: 500
size: 48px
track: −0.03em
feat: tnum
Tabular data
Tables and ledgers. Sans, tabular-nums.
Commissioner
Primitive
Lines
p50 (μs)
Allocs
pretext
1,482
184
0
vibescript
2,917
612
3
freerange
3,450
421
1
family: Commissioner
weight: 400/500
size: 13px
feat: tnum
align: num right
Code · inline
Technical terms in prose. Tint background.
JetBrains Mono

Call measureCaption(text, width) and the stack returns a proved Fit<width> — no DOM, no round trip.

family: JetBrains Mono
weight: 500
size: 12.5px
bg: rule-soft
III. Applied — one article, one stat page, one footer In the wild
§ Essay · On systems · 2026-04-17

Measurement without reflow.

How a three-primitive stack makes every caption know its own width — before the browser has even started thinking.
Jordan Park · 04 · 17 · 26 · Notes on systems · 8 min read

There is a hidden cost in every modern UI: the round trip. Code calls the DOM. The DOM answers. Code rearranges itself around the answer. The browser repaints. Somewhere in that loop a user's thumb has moved three pixels and the tooltip they summoned now points at nothing.

The stack presented here does not remove measurement. It moves it. Text is measured from the source tree — by pretext, before layout — and the resulting facts are carried forward as proofs. vibescript reads proofs, not the DOM. freerange discharges proofs at compile time, so a call like measureCaption(text, 320) returns a typed Fit<320> or fails to compile.

The result is not faster in any dramatic sense. It is steadier. A caption knows its width in microseconds, not milliseconds, and more importantly, it knows it before the first frame. The page is never wrong, even for an instant, and that turns out to be the thing that matters.

3
Primitives in the stack
1,248
Layout proofs passing
0.42ms
p50 render · desktop
0
Round trips to DOM
Read next
On the render loop
pretext: a tour
Source
github.com/p/pretext
github.com/p/vibescript
Colophon
Set in EB Garamond and Commissioner. Code in JetBrains Mono. Printed to pixels · 2026.

The rule, tightened

Garamond appears in exactly three places: the H1 that opens a piece, an occasional italic word inside body copy, and a pull quote. Also drop caps, which are a kind of H1 in miniature. That is the list. Nothing else is Garamond — not H2, not bylines, not numerals, not captions.

Commissioner does all the actual work: every heading below H1, every paragraph, every stat, every label, every table. Because it's humanist with old-style proportions, it reads as a sibling to Garamond — and because they never fight for the same job, the system never blurs.

Accent: a single cobalt blue. It appears on the italic word in an H1, on the rule beside a pull quote, on the underline of a link, and on the active state in navigation. It is a pointer, not decoration.

Spec v05 · Locked